<!DOCTYPE html>
<html>
<head>
    <title>采购产品</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            display: flex;
            flex-direction: column;
            align-items: center; /* 垂直居中 */
        }
        h1 {
            color: #333;
            margin: 20px 0;
        }
        .flash {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            width: 80%;
            text-align: center;
        }
        .flash.error {
            background-color: #ffe6e6;
            border-color: #ffcccc;
            color: #b30000;
        }
        .flash.success {
            background-color: #e6ffe6;
            border-color: #ccffcc;
            color: #006600;
        }
        form {
            max-width: 400px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f9f9f9;
            width: 80%;
        }
        label {
            display: block;
            margin: 10px 0;
        }
        input[type="text"],
        input[type="number"],
        input[type="date"],
        select,
        textarea {
            width: calc(100% - 20px); /* 减去左右 padding */
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #0056b3;
        }
        a {
            display: block;
            margin: 10px 0;
            text-decoration: none;
            color: #007BFF;
            font-size: 16px;
            text-align: center;
            width: 80%;
        }
        a:hover {
            text-decoration: underline;
        }
        .payment-method {
            display: flex;
            gap: 10px;
            margin: 10px 0;
        }
        .payment-method label {
            margin: 0;
        }
        .disabled {
            opacity: 0.5;
            pointer-events: none; /* 禁用点击事件 */
        }
    </style>
</head>
<body>
    <h1>采购产品</h1>
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="flash {{ category }}">{{ message }}</div>
            {% endfor %}
        {% endif %}
    {% endwith %}
    <form method="POST">
        <label>产品ID: <input type="number" name="product_id" value="{{ product_id }}" readonly></label><br>
        {% if product %}
            <label>产品名称: {{ product.name }}</label><br>
            <label>标签价格: {{ product.price }} 元</label><br>
        {% else %}
            <div style="color: red;">产品不存在，请检查产品ID。</div>
        {% endif %}
        <label>采购数量: <input type="number" name="quantity" min="1" required></label><br>
        <label>采购单价: <input type="number" name="purchase_price" step="0.01"></label><br>
        <label>折扣: <input type="number" name="discount" min="0" max="1.0" step="0.0001" value="1.0"></label><br>
        <label>采购日期: <input type="date" name="purchase_date" value="{{ today_date }}" required></label><br>
        <label>采购人: <input type="text" name="purchase_person" required></label><br>
        <label>备注: <textarea name="notes" rows="4"></textarea></label><br>
        
        <!-- 供应商选择 -->
        <label>选择供应商:
            <select name="supplier_id" id="supplier-select">
                <option value="">散户</option> <!-- 默认选项 -->
                {% for supplier in suppliers %}
                    <option value="{{ supplier.id }}">{{ supplier.name }}</option>
                {% endfor %}
            </select>
        </label><br>
        
        <!-- 支付方式显示 -->
        <div class="payment-method" id="payment-method">
            <label>支付方式: <span id="payment-method-label">现金</span></label>
        </div>
                
        <button type="submit">采购</button>
    </form>
    <a href="{{ url_for('list_products') }}">返回产品列表</a>
    <a href="{{ url_for('index') }}">返回主页</a>

    <script>
        const supplierSelect = document.getElementById('supplier-select');
        const paymentMethodLabel = document.getElementById('payment-method-label');
        
        supplierSelect.addEventListener('change', function() {
            if (this.value === "") {
                paymentMethodLabel.innerText = '现金';
            } else {
                paymentMethodLabel.innerText = '供应商账户金额';
            }
        });
        
        window.onload = function() {
            if (supplierSelect.value === "") {
                paymentMethodLabel.innerText = '现金';
            } else {
                paymentMethodLabel.innerText = '供应商账户金额';
            }
        };
    </script>
</body>
</html>